<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible1"
      width="80%"
      :before-close="handleClose"
    >
      <span slot="title">秒杀商品</span>
      <div style="display:flex;justify-content: flex-start;width: 100%;">
        <div style="flex: 2;">
          <span>秒杀时段</span>
          <el-table
            style="border: 1px solid #000; height: 600px;"
            :data="product.seckillTime"
          >
            <el-table-column
              label="时间段名称"
              prop="TimeName"
            ></el-table-column>
            <el-table-column
              label="开始时间"
              prop="StartTime"
            ></el-table-column>
            <el-table-column
              label="结束时间"
              prop="EndTime"
            ></el-table-column>
            <el-table-column
              label="商品数量"
              prop="number"
            ></el-table-column>
          </el-table>
        </div>
        <div style="margin-left: 20px;flex: 5;">
          <span>商品信息</span>
          <el-table
            style="border: 1px solid #000;height: 600px;"
            :data="product.productList"
          >
            <el-table-column
              label="序号"
              prop="id"
            ></el-table-column>
            <el-table-column
              label="商品信息"
              prop="productdetaillist"
              width="160"
            >
              <template slot-scope="scope">
                <div>
                  <div style="font-size: 12px; color: skyblue;">{{scope.row.productdetaillist[0].name}}</div>
                  <div style="font-size: 12px;">{{scope.row.productdetaillist[0].detail}}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="秒杀价"
              prop="seckillingPrice"
            >
              <template slot-scope="scope">
                <span>￥{{scope.row.seckillingPrice}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="零售价"
              prop="singlePrice"
            >
              <template slot-scope="scope">
                <span>￥{{scope.row.singlePrice}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="秒杀数量"
              prop="number"
            ></el-table-column>
            <el-table-column
              label="店铺名称"
              prop="stock"
              width="130"
            >
              <template slot-scope="scope">
                <span style="font-size: 12px; color: skyblue;">{{scope.row.stock}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="启用"
              prop="enable"
            >
              <template slot-scope="scope">
                <el-switch
                  active-color="blue"
                  inactive-color="gray"
                  :active-value=1
                  :inactive-value=0
                  v-model="scope.row.enable"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column
              prop="order"
              label="顺序调整"
            >
              <template slot-scope="scope">
                <div style="margin-left: 10px;">
                  <div v-if="scope.row.order=='up'">
                    <img
                      style="width: 20px;height: 20px;"
                      src="../../assets/Main/sortup.png"
                      alt="上升"
                    >
                  </div>
                  <div v-if="scope.row.order=='down'">
                    <img
                      style="width: 20px;height: 20px;"
                      src="../../assets/Main/sortdown.png"
                      alt="下降"
                    >
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "SeckilldingProduct",
  props: {
    Visible: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    Visible: {
      handler(val) {
        this.dialogVisible1 = val;
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    console.log(this.Visible);
  },
  data() {
    return {
      dialogVisible1: this.Visible,
      product: {
        seckillTime: [
          {
            TimeName: "8:00",
            StartTime: "8:00",
            EndTime: "9:00",
            number: " 98 / 100",
          },
          {
            TimeName: "10:00",
            StartTime: "10:00",
            EndTime: "11:00",
            number: " 96 / 100",
          },
        ],
        productList: [
          {
            id: 1,
            productdetaillist: [
              {
                name: "华为Pura 70 Utra",
                detail: "黑色 16G+1TB",
              },
            ],
            seckillingPrice: "1999",
            singlePrice: "2999",
            number: 100,
            stock: "中国民营商城旗舰店",
            enable: 1,
            order: "down",
          },
        ],
      },
    };
  },
  methods: {
    handleClose() {
      this.dialogVisible1 = false;
      this.$emit("close", false);
    },
  },
};
</script>

<style>
</style>